<template>
  <div class="shop-box">
    <!--<ul class="tabs-box">-->
      <!--<li :key="index" v-for="(item,index) in tabs" @click="isCur=index,changedTab(index)">-->
        <!--<span :class="{current:isCur==index}">{{item}}</span>-->
      <!--</li>-->
    <!--</ul>-->
    <!--类别内容-->
    <ul class="content" v-if="goodsList.length>0">
      <li v-for="(item,index) in goodsList" :key="index">
        <router-link :to="'/goodsDetail?pid='+item.id">
          <div class="img-box" ref="hgt" :style="{height:picHeight}">
            <img :src="sourceUrl+item.goodsImg" alt="">
          </div>
          <div class="title-box">
            <p class="g-name">{{item.goodsName}}</p>
            <p class="g-subname">{{item.goodsBrief}}</p>
            <div class="price-box">
              <span class="price">￥{{item.shopPrice.toFixed(2)}} 元/瓶</span>
              <!--<span>{{item.soldNumber}}人付款</span>-->
              <!--<img src="" alt="">-->
            </div>
          </div>
        </router-link>
      </li>
    </ul>
    <ul class="" v-else="goodsList.length<=0">
      <li class="li-center">暂无商品</li>
    </ul>
    <!--底部footer-->
    <Footer tabNum="1"></Footer>
  </div>
</template>
<script>
  import global from '../public/global.vue'

  export default {
    name: 'shop-box',
    data() {
      return {
        tabs: ['红酒', '洋酒'],
        isCur: 0,
        goodsList: [],//商品列表
        uid: "",//角色id
        level: Number,//角色级别
        sourceUrl: global.sourceUrl,
        picHeight: '176px',
        name:'',
      }
    },
    methods: {
      //类别切换
      changedTab(idx) {
        if (idx == 1) {
          this.goodsList = "";
        } else {
          this.getGoodsList();
        }
      },
      //获取商品
      getGoodsList() {
        let self = this;
        self.uid = self.$route.query.id;
        self.level = self.$route.query.level;
        self.name = self.$route.query.name;
        let url = global.apiUrl;
        self.$http.get(url + '/goods/goodsList')
          .then(res => {
//            console.log(res);
            if (res.data.code == 0) {
              self.goodsList = res.data.data
            }
          }).catch(function (err) {
          console.error(err);
        })
      }
    },
    created: function () {
      document.title = "商城";
      this.getGoodsList();


      var uid = this.$route.query.uid;
      if (uid != undefined) {
        window.localStorage.setItem("shareId",uid);
        setTimeout(() => {
        window.location.href="http://www.yingla9.com/dist/#/shop";
        }, 300)
      }
      if(window.localStorage.getItem("shareId")!=null){
        global.bindRelation(window.localStorage.getItem("shareId"),this)
      }
      let text="http://www.yingla9.com/dist/#/shop?uid="+window.localStorage.getItem("uid");
      global.wxShare("http://www.yingla9.com/dist/#/shop", "商城", text,this);
    },
    mounted() {
      setTimeout(() => {
        this.picHeight = this.$refs.hgt[0].clientWidth + 'px';
      }, 500)

    }
  }
</script>
<style lang="less" scoped>

  .shop-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*padding-top: 50px;*/
    padding-bottom: 58px;
    background: #f3f3f3;
    overflow: auto;
    .tabs-box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      background: #fff;
      li {
        width: 50%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        span {
          display: inline-block;
          width: 40%;
          height: 100%;
          font-size: 1.1rem;
        }
        .current {
          color: #D44242;
          border-bottom: 2px solid #D44242;
        }
      }
    }
    /*类别内容*/
    .content {
      width: 100%;
      padding: 2%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 49%;
        margin-right: 2%;
        background: #fff;
        margin-bottom: 10px;
        border-radius: 4px;
        box-shadow: 0 1px 4px 0px rgba(0, 0, 0, .3);
        .img-box {
          width: 100%;
          img {
            width: 100%;
          }
        }
        .title-box {
          padding: 5px;
          .g-name {
            font-size: 0.9rem;
          }
          .g-subname {
            font-size: 0.8rem;
            color: #aaa;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          .price-box {
            font-size: 0.7rem;
            margin-top: 10px;
            color: #aaa;
            letter-spacing: -1px;
            .price {
              font-size: 0.9rem;
              color: #d44242;
              margin-right: 5%;
            }
            img {
              width: 18px;
              float: right;
            }
          }
        }
      }
      li:nth-child(even) {
        margin-right: 0;
      }
    }
    /*暂无商品*/
    .li-center {
      width: 80%;
      margin: 8rem auto 0;
      text-align: center;
      font-size: 2rem;
      color: #ccc;
    }
  }
</style>
